<template>
  <div id="songlist" >
    <table class="songlist-table">
      <tr>
        <th class="btn_like"> </th>
        <th class="">歌曲</th>
        <th class="song_singer">歌手</th>
        <th class="songalbum">专辑</th>
        <th class="duration">时长</th>
      </tr>

      <tr
        v-for="(item,index) in tracks"
        :key="index"
        @dblclick="getmusic(item.id,item.name)"
        class="musictable">
      
        <!-- 需要优化 -->
        <th class="like_music" @click="likemusic(item.id,isLike(item.id))" v-if="isLike(item.id)"><i style="font-size:1.5rem;color:red;" class="el-icon-star-on"></i></th>
        <th class="like_music" @click="likemusic(item.id,isLike(item.id))" v-else><i style="font-size:1.2rem;" class="el-icon-star-off"></i></th>


        <th class="musicname">{{item.name}} <span class="songvip">{{getsongfee(item.fee)}}</span> <span @click="toMV(item.mv)" v-if="item.mv" class="songmv">{{getsongmv(item.mv)}}</span></th>
        <th class="singer"> <span>{{singerAll(item.ar)}}</span> </th>
        <th class="album"> <span>{{item.al.name}}</span> </th>
        <th @click="getduration()">{{getduration(item.dt)}}</th>
      </tr>
      
    </table>
  </div>
</template>

<script>
import { getsongurlapi } from "../../network/songlist";
import { getlikestate } from "../../network/profile";

export default {
  name: "SongList",
  data() {
    return {
      audio: null,
      songdt:[]
    };
  },
  props: {
    tracks: {
      type: Object,
      default() {
        return [];
      },
    },
    trackIds:{
      type:Array,
      default() {
        return [];
      },
    }
  },
  created() {
    this.audio = document.getElementById("myAudio");
    this.getduration()
  },
  methods: {
    getmusic(id,name) {
      console.log("双击鼠标添加音乐", id,name);
      
      //vuex 中获取歌曲名字和图片
      this.$store.dispatch("getsong", id)

      let FtrackIds = [];
      this.trackIds.forEach(function(item,index) {
        FtrackIds.push(item.id)
      })

      //console.log(FtrackIds.indexOf(id));
      this.$store.commit("PLAYALL",{FtrackIds,id})
      //this.$store.playbar.commit("PLAYALL",FtrackIds,id)
      //获取歌曲url并播放
      getsongurlapi(id).then((res) => {
        //content.commit('GetSong',res.data.data[0].url)
        //console.log(res.data.data[0].url);
        this.audio.src = res.data.data[0].url;
        //console.log(this.audio.src);
        this.audio.load();
        //console.log(this.audio.readyState);
        this.audio.play();
      });
      //改变播放图标
      //this.$store.commit('playericonset',true)
    },
    //获取歌曲时长
    getduration (dt) {
        let min = dt / 1000 / 60;
        let sec = (dt / 1000) % 60
        return min.toFixed(0) + ':' + sec.toFixed(0)
      /* for (const item in this.tracks) {
        let min = this.tracks[item].dt / 1000 / 60;
        let sec = (this.tracks[item].dt / 1000) % 60
        this.songdt[item] = min.toFixed(0) + ':' + sec.toFixed(0)
      } */
      //console.log(123,this.tracks);
    },

    //返回歌曲vip
    getsongfee(val) {
      switch (val) {
        case 1:
          return 'vip'
          break;
      
        default:
          break;
      }
    },
    //返回歌曲MV
    getsongmv(val) {
      switch (val) {
        case 0:
          break;
          
      
        default:
          return 'MV'
          break;
      }
    },
    //点击进入视频页面
    toMV(vid) {
      this.$router.push({
        path: '/PlayVideo',
        query:{
          vid:vid,
          type:0
        }
        })
    },
    //返回歌手并用 / 进行间隔
    singerAll(ar) {
      let a = [];
      ar.forEach(function (val,index) {
        a.push(val.name);
      })
      return a.join(' / ')
    },
    //查看是否喜欢
    isLike(id) {
      //查看喜欢音乐是否存在
      /* if ($store.state.userlikemusicid) {

      }else {
       console.log("没有喜欢音乐列表");
      } */
      //console.log(this.$store.state.userlikemusicid.includes(id));

      //喜欢返回ture，不喜欢返回false
      return this.$store.state.profile.userlikemusicid.includes(id)
    },
    /**
     * @likemusic 取反喜欢音乐
     *参数-- id：音乐id，payload：@isLike
     */
    likemusic(id,payload) {
      //console.log(id,payload);
      getlikestate(id,!payload).then(res => {
        if (!payload == true) {
          //取反得到喜欢并加入 喜欢数组
          this.$store.state.profile.userlikemusicid.push(id)
        }else if (!payload == false) {
          //取反得到不喜欢并删除 在喜欢数组中的id
          //得到id的索引
          let x = this.$store.state.profile.userlikemusicid.lastIndexOf(id);
          //删除对应的索引值
          this.$store.state.profile.userlikemusicid.splice(x,1)
        }else console.log("添加删除失败");
        //console.log(res.data);
      })
      //返回是否喜欢的通知信息
      switch (!payload) {
        case true:
          this.$notify({
          title: '添加喜欢成功',
          message: '歌曲添加到了 [我的喜欢] ',
          type: 'success',
          position: 'top-left'
          });
          break;
        case false:
          this.$notify({
          title: '删除成功',
          message: '歌曲已从 [我的喜欢] 中删除',
          type: 'success',
          position: 'top-left'
          });
          break;
      
        default:
          break;
      }
    }
  },

};
</script>

<style>
.songlist-table {
  width: 100%;
  text-align: left;
}
.songlist-table tr {
  height: 5vh;
}
.musictable:hover {
  background-color: rgb(230, 230, 230);
}
.duration {
  width: 50px;
}

.singer span:hover,
.album span:hover {
  cursor: pointer;
}
.songalbum {
  width: 200px;
  
}
.songvip {
  color: rgb(248, 175, 80);
}
.songmv {
  border: 1px solid red;
  color: red;
  font-size: 0.5rem;
  padding: 0 0.1rem;
}
.btn_like {
  width: 30px;
}
.like_music:hover{
  cursor: pointer;
}
</style>